<!-- 家政清洁 -->
<template>
  <div class="clean">
    <!-- 家政清洁的标题 -->
    <div class="clean__title">
      <h2>家政清洁</h2>
    </div>
    <!-- 家政清洁业务范围 -->
    <div class="clean__range">
      <div class="clean__range--items" v-for="(item,index) in cleanList" :key="item.id">
        <img :src="item.img" alt width="200px" height="200px" />
        <div class="home-server__content">
          <h3>{{item.name}}</h3>
          <p>{{item.des}}</p>
          <el-button type="danger" round @click="chooseItem(item)">查看详情</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getCleanList } from '../api/index';
export default {
  name: '',
  data() {
    return {
      // 清洁清单
      cleanList: [],
    };
  },
  components: {},
  created() {
    this.getList();
  },
  mounted() {
    document.body.scrollTop = 0;
  },
  methods: {
    // 选择某个清单
    chooseItem(item) {
      let q = {};
      Object.assign(q, item);
      q.type = 0;
      this.$router.push({
        path: '/orderTemplate',
        query: {
          q: JSON.stringify(q),
        },
      });
    },
    // 获取家政清洁清单
    getList() {
      getCleanList().then((res) => {
        if (res.code === 200) {
          this.cleanList = res.data;
        }
      });
    },
  },
  watch: {},
};
</script>

<style scoped lang='scss'>
.clean {
  width: 100%;
  .clean__title {
    width: 100%;
    height: 220px;
    background: url('../assets/imgs/blue_top.png') no-repeat;
    background-size: cover;
    h2 {
      color: #fff;
      font-size: 50px;
      line-height: 220px;
      text-align: center;
      letter-spacing: 0.5rem;
    }
  }
  .clean__range {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 20px;
    padding: 0 220px;
    .clean__range--items {
      background-color: #fff;
      width: 200px;
      height: 345px;
      display: flex;
      flex-direction: column;
      word-wrap: break-word;
      margin-bottom: 20px;
      padding: 20px 12px;
      background-color: #fff;
      border: 0.0625rem solid #e7eaf3;
      border-radius: 0.3125rem;
      box-shadow: 0px 12px 15px rgb(140 152 164 / 10%);
      border-width: 0;
      text-align: center;
      img {
        margin: 0 auto;
        vertical-align: middle;
        border: none;
      }
      h3 {
        margin-top: 20px;
        font-size: 14px;
        text-align: left;
      }
      p {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        margin-top: 10px;
        line-height: 20px;
        color: #999999;
        text-align: left;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 12px;
      }
      .el-button {
        margin-top: 15px;
        padding: 10px 20px;
      }
    }
  }
}
</style>